/*
 * @Author: jiu yin
 * @Date: 2024-06-21 13:43:24
 * @LastEditTime: 2024-07-02 15:52:14
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\pico\component\SceneDeploy.tsx
 * jiu
 */
import { devices_list, version_application_list } from "@/api/home";
import Modal_edit from "@/comment/modal_edit";
import { socket } from "@/utils/webSocket";
import { Modal, Popover, Radio, Space, message } from "antd";
import { useEffect, useState } from "react";

export default function Deploy(props: any) {
	let { isModalOpen, item, reload } = props;

	let [data_list, set_data_list] = useState([] as any);

	useEffect(() => {
		version_application_list({ page: 1, limit: 100, application_id: item.application_id }).then((res: any) => {
			set_data_list(res.data.data);
			//版本匹配
			let list_index = res.data.data.findIndex((i: any) => i.version == item.version);
			setValue(list_index == -1 ? 0 : list_index);
		});
	}, []);

	const [value, setValue] = useState(0);

	const handleOk = async () => {
		send();
		reload();
	};

	//发送-------to 到场景应用管理CodeTable 页 接收
	const send = () => {
		let active_item = data_list[value];
		if (active_item.version && item.package_name && item.device_real_sn && active_item.file_url) {
			let params = {
				action: "device/app/upgrade",
				payload: {
					package: item.package_name,
					type: "apk",
					url: active_item.file_url,
					version: active_item.version,
					range: item.device_real_sn,
				},
			};
			socket.send(JSON.stringify(params));
			isModalOpen[1](false);
			message.success("部署发送成功");
		} else {
			message.error("部署失败，数据不足");
			console.log(
				"active_item.version:" +
					active_item.version +
					"/item.package_name:" +
					item.package_name +
					"/item.device_real_sn:" +
					item.device_real_sn
			);
		}
	};

	return (
		<Modal_edit title={"选择部署版本"} width={600} isModalOpen={isModalOpen} handleOk={() => handleOk()} okText={"部署"}>
			<section className="flex justify-center mt-20px h-600px">
				<Radio.Group onChange={e => setValue(e.target.value)} value={value}>
					<Space direction="vertical">
						{data_list.map((item: any, index: number) => (
							<Radio value={index} className="bg-#F7F8FF border-rd-10px p-16px" key={index}>
								<div className="flex">
									<p className="text-14px c-#9697A9 flex">
										版本号: &nbsp;<span className="c-#161940 w-100px">V{item.version}</span>
									</p>
									<p className="text-14px c-#9697A9 flex">
										上传时间: &nbsp;<span className="c-#161940 w-140px">{item.created_at}</span>
									</p>
									<Popover
										placement="bottom"
										content={<div className="text-14px c-#9697A9 w-500px">{item.content}</div>}
										className="">
										<a>更新详情</a>
									</Popover>
								</div>
							</Radio>
						))}
					</Space>
				</Radio.Group>
			</section>
		</Modal_edit>
	);
}
